<template>
    <!-- 歌单详情页 -->
    <div class="playlist-detail container">
        <!-- 左边内容 -->
        <div class="left">
            <el-card class="left-card">
                <div class="top">
                    <div class="avatar">
                        <el-image :src="detail.coverImgUrl + '?param=200y200'">
                            <div
                                slot="placeholder"
                                class="image-slot "
                            >
                                <p>加载中<span class="dot">...</span></p>
                            </div>
                            <div
                                slot="error"
                                class="image-slot"
                            >
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <!-- 歌单信息 -->
                    <div class="info">
                        <div class="title flex-between">
                            <span>{{ detail.name }}</span>
                        </div>
                        <div class="user flex-row">
                            <div
                                class="avatar"
                                @click="toUser(creator.userId)"
                            >
                                <img
                                    :src="creator.avatarUrl + '?param=100y100'"
                                    alt=""
                                />
                            </div>
                            <p
                                class="nickname"
                                @click="toUser(creator.userId)"
                            >{{ creator.nickname }}</p>
                            <p
                                class="createTime"
                                v-if="detail.createTime"
                            >
                                创建时间：{{ utils.dateFormat(detail.createTime, 'YYYY-MM-DD') }}
                            </p>
                        </div>
                        <!-- 标签 -->
                        <div
                            class="tag flex-row"
                            v-if="detail.tags && detail.tags.length > 0"
                        >
                            标签：
                            <a
                                v-for="item of detail.tags"
                                :key="item"
                                @click="tag(item)"
                            >{{ item }}</a>
                        </div>
                        <div class="desc">
                            <p
                                class="ellipsis-two"
                                v-html="detail.description"
                            >
                            </p>
                        </div>
                    </div>

                </div>
                <!-- 歌曲列表 -->
                <div
                    class="content"
                    v-loading="loading"
                    element-loading-background="#fff"
                >
                    <artist-list :songs="songs" />
                </div>
            </el-card>
        </div>
        <div class="right">
            <!-- 喜欢这个歌单的人 -->
            <el-card class="like-card module">
                <div class="card-header flex-row">
                    <span>喜欢这个歌单的人</span>
                </div>
                <ul v-if="subscribers.length > 0">
                    <li
                        v-for="item of subscribers"
                        :key="item.userId"
                    >
                        <div
                            class="avatar"
                            @click="toUser(item.userId)"
                        >
                            <el-image
                                :src="item.avatarUrl + '?param=150y150'"
                                :alt="item.nickname"
                                :title="item.nickname"
                            >

                            </el-image>
                        </div>
                    </li>
                </ul>
                <p
                    class="no-data-text"
                    v-else
                    style="padding-bottom: 10px;"
                >还没有人喜欢</p>
            </el-card>
            <!-- 相关推荐 -->
            <el-card class="related-card module">
                <div class="card-header flex-row">
                    <span>相关推荐</span>
                </div>
                <ul>
                    <li
                        v-for="item of relatedList"
                        :key="item.id"
                        @click="toDetail(item.id)"
                    >
                        <div class="avatar">
                            <el-image
                                :src="item.coverImgUrl + '?param=150y150'"
                                :alt="item.nickname"
                                :title="item.nickname"
                            >
                            </el-image>
                        </div>
                        <div class="info">
                            <h2
                                class="ellipsis"
                                :title="item.name"
                            >{{ item.name }}</h2>
                            <span>By. <small> {{ item.creator.nickname }}</small></span>
                        </div>
                    </li>
                </ul>
            </el-card>
            <!-- 精彩评论 -->
            <el-card class="comment-card module">
                <div class="card-header flex-row">
                    <span>精彩评论</span>
                </div>
                <ul v-if="comments.length > 0">
                    <li
                        class="item"
                        v-for="item of comments"
                        :key="item.time"
                    >
                        <div
                            class="avatar"
                            @click="toUser(item.user.userId)"
                        >
                            <img
                                :src="item.user.avatarUrl + '?param=150y150'"
                                :alt="item.user.nickname"
                                :title="item.user.nickname"
                            />
                        </div>
                        <div class="info">
                            <h2 @click="toUser(item.user.userId)">
                                {{ item.user.nickname
                }}<small> · {{ utils.formatMsgTime(item.time) }}</small>
                            </h2>
                            <p>{{ item.content }}</p>
                        </div>
                    </li>
                </ul>
                <p
                    class="no-data-text"
                    v-else
                    style="padding-bottom: 10px;"
                >还没有人评论</p>
            </el-card>
        </div>
    </div>
</template>

<script>
import { createSong } from '@/model/song'
import ArtistList from '@/components/common/artistList/Index'

export default {
    data() {
        return {
            // 歌单详情
            detail: {},
            // 歌单创建者信息
            creator: {},
            // 收藏这个歌单的人
            subscribers: [],
            // 相关歌单
            relatedList: [],
            // 相似歌单
            simiList: [],
            // 评论
            comments: [],
            // 歌曲列表
            songs: [],
            // 收藏这个歌单的人数量
            s: 32,
            artistId: '',
            loading: false // 是否显示加载动画
        }
    },
    components: {
        ArtistList
    },
    created() {
        let id = this.$route.query.id
        this.artistId = id
        if (id) {
            this.initialize(id)
        }
    },
    watch: {
        $route() {
            let id = this.$route.query.id || this.singer.id
            if (id) {
                this.initialize(id)
            }
        }
    },
    methods: {
        // 标签跳转
        tag(cat) {
            this.$router.push({
                name: 'playlist',
                query: {
                    cat
                }
            })
        },
        // 获取歌单详情
        async getPlayListDetail(id, s) {
            const { data: res } = await this.$api.getPlayListDetail(id, s)
            // console.log(res)
            if (res.code !== 200) {
                return this.message.error('获取歌单详情失败！');
            }
            if (res.playlist.description !== null) {
                res.playlist.description = res.playlist.description.replace(
                    /(\r\n|\n|\r)/gm,
                    '<br />'
                )
            }
            this.detail = res.playlist
            this.creator = res.playlist.creator
            let trackIds = res.playlist.trackIds
            // 数量超过一千，进行分割
            let arrLength = 1000
            let sliceArr = []
            for (let i = 0; i < trackIds.length; i += arrLength) {
                sliceArr.push(trackIds.slice(i, i + arrLength))
            }
            this.getSongDetail(sliceArr)
        },
        // 获取歌曲列表
        async getSongDetail(sliceArr) {
            this.loading = true
            let before = sliceArr[0]
            let after = sliceArr[1]
            let timestamp = new Date().valueOf()
            let beforeIds = []
            let afterIds = []
            before.map(item => {
                beforeIds.push(item.id)
            })
            beforeIds = beforeIds.join(',')
            if (after) {
                after.map(item => {
                    afterIds.push(item.id)
                })
                afterIds = afterIds.join(',')
            }
            if (after) {
                const { data: beforeRes } = await this.$api.getSongDetail(beforeIds, timestamp)
                const { data: afterRes } = await this.$api.getSongDetail(afterIds, timestamp + 1)
                const res = beforeRes.songs.concat(afterRes.songs)
                this.songs = this._normalizeSongs(res)
                // console.log(res);
            } else {
                const { data: beforeRes } = await this.$api.getSongDetail(beforeIds, timestamp)
                const res = beforeRes.songs
                this.songs = this._normalizeSongs(res)
                // console.log(res);
            }
            this.loading = false
        },
        // 获取歌单收藏者
        async getSubscribersPlaylist(id) {
            let params = {
                id,
                limit: 30,
                offset: 0
            }
            const { data: res } = await this.$api.getSubscribersPlaylist(params)
            if (res.code !== 200) {
                return this.message.error('获取歌单收藏者失败！');
            }
            this.subscribers = res.subscribers
        },
        // 获取相关歌单推荐
        async getRelatedPlaylist(id) {
            const { data: res } = await this.$api.getRelatedPlaylist(id)
            if (res.code !== 200) {
                return this.message.error('获取相关歌单推荐失败！');
            }
            this.relatedList = res.playlists
        },

        // 获取评论
        async getCommentPlaylist(id) {
            let params = {
                id,
                limit: 28,
                offset: 0
            }
            const { data: res } = await this.$api.getCommentPlaylist(params)
            if (res.code !== 200) {
                return this.message.error('获取评论失败！');
            }
            if (res.hotComments.length > 0) {
                this.comments = res.hotComments
            } else {
                this.comments = res.comments
            }
        },
        // 相关推荐详情
        toDetail(id) {
            this.$router.push({
                name: 'playlistDetail',
                query: {
                    id
                }
            })
        },
        toUser(id) {
            this.$router.push({
                name: 'personal',
                query: {
                    id
                }
            })
        },
        // 处理歌曲
        _normalizeSongs(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(createSong(item))
                }
            })
            return ret
        },
        // 初始化
        initialize(id) {
            this.getPlayListDetail(id, 100)
            this.getRelatedPlaylist(id)
            this.getSubscribersPlaylist(id)
            this.getCommentPlaylist(id)
        }
    },
}
</script>

<style lang="less" scoped>
.playlist-detail {
    min-width: 1080px;
    display: flex;
    align-items: flex-start;
    .left {
        flex: 1;
        width: 950px;
        margin-right: 20px;
        .left-card {
            width: 100%;
            padding: 15px;
            .top {
                display: flex;
                .avatar {
                    width: 200px;
                    height: 200px;
                    margin-right: 30px;
                    .el-image {
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        box-shadow: 3px 3px 12px #7f54f7;
                        .image-slot {
                            line-height: 200px;
                        }
                    }
                }
                .info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .title {
                        width: 100%;
                        font-size: 24px;
                        font-weight: bold;
                        line-height: 24px;
                        color: #4a4a4a;
                    }
                    .user {
                        .avatar {
                            width: 30px;
                            height: 30px;
                            margin-right: 15px;
                            cursor: pointer;
                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 50%;
                            }
                        }
                        .nickname {
                            font-size: 14px;
                            color: #333;
                            margin-right: 30px;
                            cursor: pointer;
                            &:hover {
                                color: #fa2800;
                            }
                        }
                        .createTime {
                            font-size: 14px;
                            color: #808080;
                        }
                    }
                    .tag {
                        margin: 10px 0;
                        a {
                            display: inline-block;
                            margin-right: 15px;
                            padding: 4px 12px;
                            font-size: 12px;
                            border-radius: 15px;
                            color: #fff;
                            background: #fa2800;
                            cursor: pointer;
                        }
                    }
                    .desc {
                        line-height: 25px;
                    }
                }
            }
            .content {
                margin-top: 20px;
            }
        }
    }
    .right {
        width: 350px;
        .module {
            padding: 15px;
            width: 100%;
            min-width: 350px;
            border-radius: 8px;
            margin-bottom: 20px;
            .card-header {
                border-left: 4px solid #fa2800;
                padding: 2px 6px;
                margin-bottom: 15px;
                font-weight: bold;
            }
        }
        .like-card {
            padding-bottom: 5px;
            ul {
                display: flex;
                flex-wrap: wrap;
                li {
                    flex: 0 0 16.6%;
                    max-width: 16.6%;
                    padding: 0 5px 10px;
                    cursor: pointer;
                    .avatar {
                        position: relative;
                        .el-image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
        .related-card {
            padding-bottom: 5px;
            ul {
                li {
                    display: flex;
                    margin-bottom: 15px;
                    cursor: pointer;
                    .avatar {
                        width: 50px;
                        height: 50px;
                        margin-right: 15px;
                        .el-image {
                            width: 100%;
                            border-radius: 3px;
                        }
                    }
                    .info {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        h2 {
                            font-size: 14px;
                            margin-bottom: 5px;
                        }
                        span {
                            font-size: 12px;
                            color: #a5a5c1;
                        }
                        &:hover {
                            h2 {
                                color: #fa2800;
                            }
                        }
                    }
                }
            }
        }
        .comment-card {
            ul {
                li {
                    padding: 10px 0;
                    width: 100%;
                    display: flex;
                    .avatar {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        margin-right: 12px;
                        flex-shrink: 0;
                        cursor: pointer;
                        img {
                            width: 100%;
                            border-radius: 50%;
                        }
                    }
                    .info {
                        flex: 1;
                        h2 {
                            font-size: 15px;
                            margin-right: 5px;
                            margin-bottom: 10px;
                            cursor: pointer;
                            small {
                                font-size: 12px;
                                color: #a5a5c1;
                                font-weight: 200;
                            }
                        }
                        p {
                            width: 100%;
                            font-size: 12px;
                            color: #666666;
                            line-height: 1.6;
                            padding: 5px 10px;
                            background: #f5f5f5;
                            margin-top: 5px;
                            border-radius: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>